/**
 * #info
 *
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/05/18
 *@description  menu-item  component  菜单条目组件
 */
/**
 * #item
 *
 * @type        aty-menu-item
 * @cn            菜单条目
 * @nameprop    text
 * @stPlugin    false
 * @stContainer false
 * @parents      [aty-menu,aty-submenu,aty-menu-group]
 */
import config from '../../../../config/config.js'

// mixins
import Emitter from '../../../../mixins/emitter.js'
import mixin from './../mixin/mixin.js'
// prefix
const prefixCls = config.prefix + '-menu'
// module
export default {
  name: prefixCls + '-item',
  mixins: [Emitter, mixin],
  props: {
    /**
     * #property
     *
     * @name      code
     * @cn       菜单项的唯一标识
     * @type     string,number
     * @auto     true
     * @required true
     * @description 菜单项的唯一标识，必填，否则将影响选中效果
     */
    code: {
      type: [String, Number],
      required: true
    },
    /**
     * #property
     *
     * @name    disabled
     * @cn      是否禁用
     * @type    boolean
     * @value    false
     * @description 是否禁用
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name  text
     * @cn   文本
     * @type  string
     * @value 菜单条目
     * @description 菜单条目的内容
     */
    text: {
      type: String,
      default: '菜单条目'
    },
    /**
     * #property
     *
     * @name icon
     * @cn   图标路径
     * @type image
     * @description 菜单条目的图标
     */
    icon: {
      type: String
    }
  },
  data () {
    return {
      active: false
    }
  },
  computed: {
    classes () {
      return [
                `${prefixCls}-item`,
                {
                  [`${prefixCls}-item-active`]: this.active,
                  [`${prefixCls}-item-selected`]: this.active,
                  [`${prefixCls}-item-disabled`]: this.disabled
                }
      ]
    },
    iconClass () {
      return [
        config.prefix + '-img-icon'
      ]
    },
    itemStyle () {
      return this.hasParentSubmenu && this.mode !== 'horizontal' ? {
        paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px'
      } : {}
    }
  },
  methods: {
    handleClick (event) {
      if (this.disabled) {
        return
      }

      this.dispatch(config.prefix + '-menu', 'menu-item-select', {
        code: this.code,
        text: this.text,
        isClick: true
      })
      /**
       * #event
       *
       * @name    click
       * @param   item    当前点击的条目
       * @param   event    event对象
       * @body
       * @description   点击时触发
       */
      this.$emit('click', { code: this.code, text: this.text }, event)
    }
  },
  mounted () {
    const _atyMenu = Artery.findComponentUpward(this, config.prefix + '-menu')

    if (_atyMenu) {
      if (_atyMenu.activeCode == this.code) {
        // debugger
        this.active = true
        const parent = Artery.findComponentUpward(this, config.prefix + '-submenu')
        if (parent) {
          parent.opened = true
        }
        if (_atyMenu.triggerClick) {
          this.handleClick()
        }
      }
    }

    this.$on('update-active-code', (menu) => {
      if (this.code === menu.code) {
        this.active = true
        // [2019年6月27日 17:07:58 by Vinsea] 通过修改 menu 的activeCode属性激活菜单时，需要触发@select事件
        this.dispatch(config.prefix + '-menu', 'menu-item-select', { code: this.code, text: this.text })
        this.dispatch(config.prefix + '-submenu', 'update-active-code', menu)
      } else {
        this.active = false
      }
    })

    // 避免子菜单或者item用了异步条件的v-if，导致其事件接收不到，所以在mounted之后在触发一次。
    this.$nextTick(() => {
      if (this.menu && this.menu.activeCode && this.code === this.menu.activeCode) {
        this.dispatch(config.prefix + '-menu', 'menu-item-select', { code: this.code, text: this.text })
        this.dispatch(config.prefix + '-submenu', 'update-active-code', {
          code: this.menu.activeCode,
          isShowSubMenu: this.menu.showSubMenu,
          isClick: false
        })
      }
    })

  }
}
